<template>
  <div>
    <h1 ref="h1dom">模板ref使用</h1>
    <hr />
    <Child ref="child" />
  </div>
</template>

<script>
import Child from '../components/child.vue'
import { ref, onMounted } from '@vue/runtime-core'
export default {
  components: {
    Child
  },
  setup () {
    // 1. 获取dom对象-->之梦用ref-->注意: 变量名和元素的值 一一对应
    const h1dom = ref()
    onMounted(() => {
      console.log('vue3获取dom对象：', h1dom.value)
      h1dom.value.style.color = 'red'
      console.log('vue3获取组件实例：', child.value)
      child.value.fn()
    })
    // 2.获取组件实例
    const child = ref()
    return { h1dom, child }
  },
  mounted () {
    console.log('vue2获取dom对象：', this.$refs)
  }
}
</script>

<style lang="scss" scoped>
</style>
